<template>
  <el-row>
    <el-col :span="5">
      <div class="grid-content bg-purple">
        <el-tree :data="MenuData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    </el-col>
    <el-col :span="19">
      <div class="grid-content bg-purple-light">
        <el-form :model="MenuFormData"  status-icon :rules="MenuFormRules" ref="EditRuleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input type="text" v-model="MenuFormData.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父节点" prop="parentId">
            <el-input type="text"  v-model="parentName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="连接地址" prop="url">
            <el-input type="text"  v-model="MenuFormData.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input type="text" v-model="MenuFormData.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否有效" prop="visible">
              <el-switch
                  v-model="MenuFormData.visible"
                  :active-value="0"
                  :inactive-value="1"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="shuaxin">刷新</el-button>
            <el-button type="primary" v-show="showtianjia" @click="tianjia">添加</el-button>
            <el-button type="primary" v-show="showgengxin" @click="genxin">更新</el-button>
            <el-button type="danger" v-show="showshanchu" @click="shnchu">删除</el-button>
          </el-form-item>
        </el-form>
      </div>


      <!-- 添加菜单的弹框  -->
      <el-dialog
          title="提示"
          :visible.sync="AddMenuDialogVisible"
          width="30%">

        <el-form :model="AddMenuFormData"  status-icon :rules="AddMenuFormRules" ref="AddMenuRuleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input type="text" v-model="AddMenuFormData.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父节点" prop="parentId">
<!--            <el-input type="text"  v-model="AddMenuFormData.parentId" autocomplete="off"></el-input>-->
            <el-select v-model="AddMenuFormData.parentId" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.menuId"
                  :label="item.menuName"
                  :value="item.menuId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="连接地址" prop="url">
            <el-input type="text"  v-model="AddMenuFormData.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input type="text" v-model="AddMenuFormData.icon" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="AddMenuDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddMenu">确 定</el-button>
        </span>
      </el-dialog>

    </el-col>
  </el-row>
</template>

<script>
export default {
name: "Menu",

  data() {
    return {
      //菜单数的值
      MenuData: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      //表单的值
      MenuFormData:{},
      MenuFormRules:{},
      //父节点名称
      parentName:"",
      //是否显示添加按钮
      showtianjia: true,
      //是否显示跟新按钮
      showgengxin: false,
      //是否显示删除按钮
      showshanchu: true,
      //是否打开添加弹框
      AddMenuDialogVisible:false,
      //添加弹框中的表单数据
      AddMenuFormData:{},
      AddMenuFormRules:{
        menuName:[
          {required:true,message:"菜单名称不能为空",trigger:"blur"}
        ],
        parentId:[
          {required:true,message:"父节点不能为空",trigger:"blur"}
        ],
      },
      options: [],
      value: ''
    };
  },
  created() {
    this.initMenuTree();
  },
  methods: {
    handleNodeClick(data) {
      var that = this;
      this.MenuFormData = data;
      if (data.parentId == 0){
        this.parentName="根节点";
        that.showtianjia = true;
        that.showgengxin = false;
        that.showshanchu = true;
      }else {
        this.$http.get(`/sys/menu/getMenuByMenuId/${data.parentId}`).then(function (res){
          that.parentName = res.data.data.menuName;
          that.showtianjia = false;
          that.showgengxin = true;
          that.showshanchu = true;
        })
      }
    },
    //初始化菜单树的方法
    initMenuTree(){
      var that = this;
      this.$http.get(`/sys/menu/getAllMenus/0`).then(function (res){
        if (res.data.code == 200){
          that.MenuData = res.data.data.menus;
        }
      })
    },
    //刷新方法
    shuaxin(){
      this.initMenuTree();
      this.MenuFormData = {};
      this.parentName = "";
    },
    //打开添加弹框之后 进行下拉回显 回显的方法
    tianjia(){
      this.AddMenuDialogVisible=true;
      var that = this;
      this.$http.get("/sys/menu/selectAllMenu").then(function (res){
        //console.log(res)
        that.options = res.data.data;
      })
    },
    //提交添加弹框
    confirmAddMenu(){
      //console.log(this.AddMenuFormData);
      var that = this;
      this.$refs['AddMenuRuleForm'].validate((valid) => {
        if (valid) {
          this.$http.post("/sys/menu/insertOneMenu",this.AddMenuFormData).then(function (res){
            if (res.data.code == 200){
              that.$message.success(res.data.msg);
              that.AddMenuDialogVisible = false;
              that.initMenuTree();
            }else {
              that.$message.error(res.data.msg);
            }
          })
        }
      })
    }
    ,
    //更新菜单的方法
    genxin(){
      //console.log(this.MenuFormData)
      var that = this;
      this.$http.post("/sys/menu/updateMenu",this.MenuFormData).then(function (res){
        if (res.data.code == 200){
          that.$message.success(res.data.msg);
        }else {
          that.$message.error(res.data.msg);
        }
      })
    },
    //删除菜单的方法
    shnchu(){
      var that = this;
      this.$http.post("/sys/menu/deleteMenu",this.MenuFormData).then(function (res){
        if (res.data.code == 200){
          that.$message.success(res.data.msg);
          that.MenuFormData = {};
          that.parentName = "";
          that.initMenuTree();
        }else {
          that.$message.error(res.data.msg);
        }
      })
    }

  }

}
</script>

<style scoped>

</style>